<template>
  <div id="login">
    <!-- <img src="../assets/image/bodybg.jpg" alt class="loginBg" /> -->
    <div class="zhongjianbox">
      <div style="flex:1;"></div>
      <div class="boxFath">
        <!-- <p style="font-size: 24px;color: #fff;margin-top: 0;">步达科技考勤管理系统</p> -->
        <div class="loginBox">
          <div class="tabBox">
            <!-- <span
              :class="{ spanStyle: true, borderStyle: this.activeId == 1 }"
              @click="spanClick(1)"
              >域登录</span> -->
            <span
              :class="{ spanStyle: true, borderStyle: false }"
              @click="spanClick(2)"
              >工号登录</span
            >
          </div>
          <div class="inputBox" v-if="this.activeId == 1">
            <TextBox
              ref="username"
              v-model="username"
              placeholder="请输入邮箱"
              class="inputStyle"
              :inputStyle="{ 'font-size': '12px' }"
              @keyup.enter.native="passwordFocus()"
              iconCls="icon-man"
            ></TextBox>
            <PasswordBox
              ref="password"
              v-model="password"
              placeholder="请输入密码"
              class="inputStyle"
              :inputStyle="{ 'font-size': '12px' }"
              @keyup.enter.native="submit()"
            ></PasswordBox>
          </div>
          <div class="inputBox" v-else-if="this.activeId == 2">
            <TextBox
              ref="username"
              v-model="username"
              placeholder="请输入工号"
              class="inputStyle"
              :inputStyle="{ 'font-size': '12px' }"
              iconCls="icon-man"
              @keyup.enter.native="passwordFocus()"
            ></TextBox>
            <PasswordBox
              ref="password"
              v-model="password"
              placeholder="请输入密码"
              class="inputStyle"
              :inputStyle="{ 'font-size': '12px' }"
              @keyup.enter.native="submit()"
            ></PasswordBox>
          </div>

          <button class="loginBtn" @click="submit()">登 录</button>

          <!--<button class="loginBtn" @click="toMapSet()">打开考勤点设置</button>-->

        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 获取登录接口
// import login from "@/api/login/login";
import cfg from "@/config/config";

export default {
  name: "",
  data() {
    return {
      username: null,
      password: null,
      activeId: 2 //默认 1 域登录  2工号登录
    };
  },
  mounted() {
    console.log(window.Location)
  },
  methods: {
    toMapSet(){
      window.open(cfg.scmUrlPersonalInformation + "mapPositionSet")
    },
    spanClick(n) {
      this.activeId = n;
      this.username = null;
      this.password = null;
    },
    passwordFocus() {
      this.$refs.password.focus();
    },
    submit() {
      this.$router.replace("/mapPositionSet");
      // console.log(this.username);
      // console.log(this.password);
      //验证登录名称  密码不为空
      // if (this.validateForm()) {
      //   //调用方法
      //   this.$loading("正在登录中...");
      //   //进行登录处理
      //   let param = {
      //     username: this.username,
      //     password: this.password,
      //     activeId: this.activeId //1 域登录  2工号登录
      //   };
      //   //调用后台方法
      //   let valiLogin = login.valiLogin(param);
      //   valiLogin.then(res => {
      //     //关闭方法
      //     this.$loading.close();
      //     if (res.code == "200") {
      //       if (res.result.code == "00000") {
      //         if (cfg.isProd) {
      //           if (res.result.identity == 2) {
      //             //如果是管理员登录一卡通
      //             window.location.href =
      //               cfg.scmUrl + "?userAccount=" + res.result.userNO;
      //           } else {
      //             //如果是普通员工登录个人页面
      //             window.location.href = cfg.scmUrlPersonalInformation;
      //           }
      //         } else {
      //           if (res.result.identity == 2) {
      //             //如果是管理员登录考勤页面
      //             window.location.href = cfg.scmUrl;
      //           } else {
      //             //如果是普通员工登录个人页面
      //             window.location.href = cfg.scmUrlPersonalInformation;
      //           }
      //         }
      //       } else {
      //         this.$refs.password.blur();
      //         this.$messager.alert({
      //           title: "提示框",
      //           icon: "error",
      //           msg: res.result.message + "[" + res.result.code + "]"
      //         });
      //       }
      //     } else {
      //       this.$messager.alert({
      //         title: "提示框",
      //         icon: "error",
      //         msg: res.message
      //       });
      //     }
      //   });
      //
      // }
    },
    validateForm() {
      if (null == this.username || "" == this.username) {
        if (1 == this.activeId) {
          this.$messager.alert({
            title: "提示框",
            icon: "warning",
            msg: "邮箱不能为空"
          });
        } else {
          this.$messager.alert({
            title: "提示框",
            icon: "warning",
            msg: "工号不能为空"
          });
        }
        return false;
      }
      if (null == this.password || "" == this.password) {
        this.$messager.alert({
          title: "提示框",
          icon: "warning",
          msg: "密码不能为空"
        });
        return false;
      }
      return true;
    }
  }
};
</script>

<style scoped>
#login {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 560px;
  min-width: 1300px;
  overflow: auto;
}
.loginBg {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
  left: 0;
}
.zhongjianbox {
  width: 100%;
  height: 400px;
  position: absolute;
  top: 50%;
  margin-top: -200px;
  display: flex;
}
.boxFath {
  width: 400px;
  margin-right: 5%;
  float: right;
}
.loginBox {
  /* position: absolute;
  top: 50%; */
  /* left: 50%; */
  /* right: 5%; */
  /* margin-top: -150px; */
  /* margin-left: -220px; */
  background-color: #f9f9f9;
  padding: 20px;
}
.inputStyle {
  height: 40px;
  width: 80%;
  margin-bottom: 20px;
  border-radius: 4px 4px 4px 4px;
}
.inputBox {
  margin-bottom: 10px;
  padding-top: 30px;
  text-align: center;
}
.tabBox {
  border-bottom: 1px solid #eee;
}
.spanStyle {
  /* 如果要打开域登陆切换，此处width设置为50% ，单个登录设为100%*/
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #999;
  font-weight: 700;
  display: inline-block;
  line-height: 40px;
  cursor: default;
  border-bottom: 1px solid #fff;
  transition: all 1s ease;
  -moz-transition: all 1s ease; /* Firefox 4 */
  -webkit-transition: all 1s ease; /* Safari 和 Chrome */
  -o-transition: all 1s ease; /* Opera */
}
.borderStyle {
  border-bottom: 1px solid #0091ea;
  color: #0091ea;
}

@media screen and (min-width: 1340px) {
  #login {
    background: url(../assets/image/denglu2.jpg) no-repeat center center;
  }
}
@media screen and (max-width: 1339px) {
  #login {
    background: url(../assets/image/denglu3.jpg) no-repeat center center;
  }
}
</style>
